<?xml version='1.0' encoding='UTF-8' ?> 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"
      xmlns:ui="http://java.sun.com/jsf/facelets"
      xmlns:h="http://java.sun.com/jsf/html">

    <h:head>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
        <meta http-equiv="content-type" content="text/html; charset=utf-8" />
        <title>Product</title>
        <link rel="stylesheet" type="text/css" href="css/reset.css" media="screen" />
        <link rel="stylesheet" type="text/css" href="css/text.css" media="screen" />
        <link rel="stylesheet" type="text/css" href="css/grid.css" media="screen" />
        <link rel="stylesheet" type="text/css" href="css/layout.css" media="screen" />
        <link rel="stylesheet" type="text/css" href="css/nav.css" media="screen" />

        <!--[if IE 7]><link rel="stylesheet" type="text/css" href="css/ie.css" media="screen" /><![endif]-->
        <link rel="stylesheet" type="text/css" href="css/table/demo_page.css" />
        <!-- BEGIN: load jquery -->
        <script type="text/javascript" src="js/jquery-1.6.4.min.js" ></script>
        <script type="text/javascript" src="js/jquery-ui/jquery.ui.core.min.js"></script>
        <script type="text/javascript" src="js/jquery-ui/jquery.ui.widget.min.js" ></script>
        <script type="text/javascript" src="js/jquery-ui/jquery.ui.accordion.min.js" ></script>
        <script src="js/jquery-ui/jquery.effects.core.min.js" type="text/javascript"></script>
        <script src="js/jquery-ui/jquery.effects.slide.min.js" type="text/javascript"></script>
        <script src="js/jquery-ui/jquery.ui.mouse.min.js" type="text/javascript"></script>
        <script src="js/jquery-ui/jquery.ui.sortable.min.js" type="text/javascript"></script>
        <script src="js/table/jquery.dataTables.min.js" type="text/javascript"></script>
        <!-- END: load jquery -->
        <script type="text/javascript" src="js/table/table.js"></script>
        <script src="js/setup.js" type="text/javascript"></script>
        <script type="text/javascript">
            $(document).ready(function () {
                setupLeftMenu();
                $('.datatable').dataTable();
                setSidebarHeight();
            });
        </script>
        <ui:insert name="head">Head</ui:insert>
    </h:head>

    <h:body>
        <div id="">
            <div class="container_12">
                <div class="grid_12 header-repeat">
                    <div id="branding">
                        <div class="floatleft">
                            <img src="img/logo.png" alt="Logo" /></div>
                        <div class="floatright">
                            <div class="floatleft">
                                <img src="img/img-profile.jpg" alt="Profile Pic" />
                            </div>
                            <div class="floatleft marginleft10">
                                <ul class="inline-ul floatleft">
                                    <li>Hello Admin</li>
                                    <li><a href="#">Config</a></li>
                                    <li><a href="#">Logout</a></li>
                                </ul>
                                <br />
                                <span class="small grey">Last Login: 3 hours ago</span>
                            </div>
                        </div>
                        <div class="clear">
                        </div>
                    </div>
                </div>
                <div class="clear">
                </div>
                <div class="grid_12">
                    <ul class="nav main">
                        <li class="ic-dashboard">
                            <a href="../dashboard.html"><span>Dashboard</span></a> 
                        </li>
                        <li class="ic-form-style">
                            <a href="javascript:"><span>Controls</span></a>
                            <ul>
                                <li><a href="form-controls.html">Forms</a> </li>
                                <li><a href="buttons.html">Buttons</a> </li>
                                <li><a href="form-controls.html">Full Page Example</a> </li>
                                <li><a href="table.html">Page with Sidebar Example</a> </li>
                            </ul>
                        </li>
                        <li class="ic-typography">
                            <a href="typography.html"><span>Typography</span></a>
                        </li>
                        <li class="ic-charts">
                            <a href="charts.html"><span>Charts  Graphs</span></a>
                        </li>
                        <li class="ic-grid-tables">
                            <a href="table.html"><span>Data Table</span></a>
                        </li>
                        <li class="ic-gallery dd">
                            <a href="javascript:"><span>Image Galleries</span></a>

                            <ul>
                                <li>
                                    <a href="image-gallery.html">Pretty Photo</a>
                                </li>
                                <li>
                                    <a href="gallery-with-filter.html">Gallery with Filter</a> 
                                </li>
                            </ul>
                        </li>
                        <li class="ic-notifications">
                            <a href="notifications.html"><span>Notifications</span></a>
                        </li>
                    </ul>
                </div>

                <div class="clear">
                </div>

                <div class="grid_2">
                    <div class="box sidemenu">
                        <div class="block" id="section-menu">
                            <ul class="section menu">
                                <li><a class="menuitem">Product</a>
                                    <ul class="submenu">
                                        <li><a href="Product.jsp">View</a> </li>
                                        <li><a href="AddProduct.jsp">Add</a> </li>
                                        <li>
                                            <a class="active">Search</a>
                                        </li>
                                    </ul>
                                </li>
                                <li><a class="menuitem">Report</a>
                                    <ul class="submenu">
                                        <li><a>Report 1</a></li>
                                        <li><a>Report 2</a></li>
                                    </ul>
                                </li>
                            </ul>
                        </div>
                    </div>
                </div>

                <!--Show data-->
                <div class="grid_10">
                    <div class="box round first grid">
                        <h2>Product</h2>
                        <div class="block">
                            <table class="data display datatable" id="example">
                                <thead>
                                    <tr>
                                        <th>No</th>
                                        <th>Name</th>
                                        <th>Producer</th>
                                        <th>Category</th>
                                        <th>Quantity</th>
                                        <th>Activated</th>
                                        <th>Modified date</th>
                                        <th>Action</th>
                                    </tr>
                                </thead>
                                <tbody>
                                    	
                                </tbody>
                            </table>
                        </div>
                    </div>
                </div>

                <div class="clear">
                </div>
            </div>

            <div class="clear">
            </div>

            <div id="site_info">
                <p>
                    <a href="#">tech-pro</a> © 2012
                </p>
            </div>
        </div>
        <!--        <div id="top">
                    <ui:insert name="top">Top</ui:insert>
                </div>
                <div>
                    <div id="left">
                        <ui:insert name="left">Left</ui:insert>
                    </div>
                    <div id="content" class="left_content">
                        <ui:insert name="content">Content</ui:insert>
                    </div>
                </div>
                <div id="bottom">
                    <ui:insert name="bottom">Bottom</ui:insert>
                </div>-->

    </h:body>

</html>
